<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">

        </el-form>


        <el-table border :height="tableHeight"
                  v-if="refreshTable"
                  v-loading="loading"
                  :data="boqList"
                  row-key="boqCode"
                  lazy
                  :load="loadNode"
                  :default-expand-all="isExpandAll"
                  :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
            <el-table-column label="清单编号" align="left" prop="boqCode" type="" width="150"/>
            <el-table-column label="清单名称" align="left" prop="boqName" />
            <el-table-column label="单位" align="center" prop="unit"/>
        </el-table>

        <!-- 添加或修改基础工程量清单对话框 -->
        <el-dialog :title="title" v-model="open" :close-on-click-modal="false" width="500px" append-to-body :close-on-click-modal="false">
            <el-form ref="boqRef" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="清单编号" prop="boqCode">
                    <el-input v-model="form.boqCode" placeholder="请输入清单编号"/>
                </el-form-item>
                <el-form-item label="清单名称" prop="boqName">
                    <el-input v-model="form.boqName" placeholder="请输入清单名称"/>
                </el-form-item>
                <el-form-item label="单位" prop="unit">
                    <el-input v-model="form.unit" placeholder="请输入单位"/>
                </el-form-item>
                <el-form-item label="排序" prop="orderNum">
                    <el-input v-model="form.orderNum" placeholder="请输入排序"/>
                </el-form-item>
                <el-form-item label="上级清单编号" prop="parentCode">
                    <el-input v-model="form.parentCode" placeholder="请输入上级清单编号"/>
                </el-form-item>
                <el-form-item label="级别" prop="level">
                    <el-input v-model="form.level" placeholder="请输入级别"/>
                </el-form-item>
                <el-form-item label="是否叶子结点" prop="leafNode">
                    <el-input v-model="form.leafNode" placeholder="请输入是否叶子结点"/>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup name="BasicBoq">
    import {list, getInfo, add, update, del} from "@/api/basic/boq";

    const { proxy } = getCurrentInstance();

    const boqList = ref([
      {
        boqCode: "100",
        boqName: "第100章 总则",
        unit: "",
        hasChildren: true
      }, {
        boqCode: "200",
        boqName: "第200章 路基",
        unit: "",
        hasChildren: true
      }, {
        boqCode: "300",
        boqName: "第300章 路面",
        unit: "",
        hasChildren: true
      }, {
        boqCode: "400",
        boqName: "第400章 桥梁、涵洞",
        unit: "",
        hasChildren: true
      }, {
        boqCode: "600",
        boqName: "第600章 安全设施及预埋管线",
        unit: "",
        hasChildren: true
      }, {
        boqCode: "700",
        boqName: "第700章 绿化及环境保护设施",
        unit: "",
        hasChildren: true
      }, {
        boqCode: "800",
        boqName: "第800章 房建",
        unit: "",
        hasChildren: true
      }, {
        boqCode: "900",
        boqName: "第900章 机电",
        unit: "",
        hasChildren: true
      }
    ]);
    const open = ref(false);
    const loading = ref(false);
    const showSearch = ref(true);
    const ids = ref([]);
    const single = ref(true);
    const multiple = ref(true);
    const total = ref(0);
    const title = ref("");
    const tableHeight = ref(document.documentElement.scrollHeight - 215 + "px");

    const isExpandAll = ref(false);
    const refreshTable = ref(true);

    const data = reactive({
        form: {},
        queryParams: {
          parentCode: "0"
        },
        rules: {
            boqCode: [
                {required: true, message: "清单编号不能为空", trigger: "blur"}
            ],
            boqName: [
                {required: true, message: "清单名称不能为空", trigger: "blur"}
            ],
        }
    });

    const {queryParams, form, rules} = toRefs(data);

    function loadNode(row, treeNode, resolve) {
      loading.value = true;
      console.log(row);
      queryParams.value.parentCode = row.boqCode;
      list(queryParams.value).then(response => {
        // 转换数据格式（根据后端字段适配）
        const nodes = response.data.map(item => ({
          boqCode: item.boqCode,
          boqName: item.boqName,
          unit: item.unit,
          hasChildren: item.leafNode == 'N'? true : false
        }));
        resolve(nodes); // 注入子节点数据
        loading.value = false;
      });
    }

    // 取消按钮
    function cancel() {
        open.value = false;
        reset();
    }

    // 表单重置
    function reset() {
        form.value = {
            id: null,
            boqCode: null,
            boqName: null,
            unit: null,
            orderNum: null,
            parentCode: null,
            ancestors: null,
            level: null,
            leafNode: null,
            createBy: null,
            createTime: null,
            updateBy: null,
            updateTime: null
        };
        proxy.resetForm("boqRef");
    }

    /** 搜索按钮操作 */
    function handleQuery() {
        queryParams.value.pageNum = 1;
        getList();
    }

    /** 重置按钮操作 */
    function resetQuery() {
        proxy.resetForm("queryRef");
        handleQuery();
    }

    // 多选框选中数据
    function handleSelectionChange(selection) {
        ids.value = selection.map(item => item.id);
        single.value = selection.length != 1;
        multiple.value = !selection.length;
    }

    /** 新增按钮操作 */
    function handleAdd() {
        reset();
        open.value = true;
        title.value = "添加基础工程量清单";
    }

    /** 修改按钮操作 */
    function handleUpdate(row) {
        reset();
        const _id = row.id || ids.value
        getInfo(_id).then(response => {
            form.value = response.data;
            open.value = true;
            title.value = "修改基础工程量清单";
        });
    }

    /** 提交按钮 */
    function submitForm() {
        proxy.$refs["boqRef"].validate(valid => {
            if (valid) {
                if (form.value.id != null) {
                    update(form.value).then(response => {
                        proxy.$modal.msgSuccess("修改成功");
                        open.value = false;
                        getList();
                    });
                } else {
                    add(form.value).then(response => {
                        proxy.$modal.msgSuccess("新增成功");
                        open.value = false;
                        getList();
                    });
                }
            }
        });
    }

    /** 删除按钮操作 */
    function handleDelete(row) {
        const _ids = row.id || ids.value;
        proxy.$modal.confirm('是否确认删除基础工程量清单编号为"' + _ids + '"的数据项？').then(function () {
            return del(_ids);
        }).then(() => {
            getList();
            proxy.$modal.msgSuccess("删除成功");
        }).catch(() => {
        });
    }

    /** 导出按钮操作 */
    function handleExport() {
        proxy.download('basic/boq/export', {
            ...queryParams.value
        }, `boq_${new Date().getTime()}.xlsx`)
    }

</script>
